<script setup>
import axios from 'axios';
import { ref, reactive } from 'vue'
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import ButtonVue from '../button/button1.vue';
import jwt_decode from "jwt-decode";
import { useTestStore } from '@/stores/test.js'
const store = useTestStore()

const router = useRouter();
const cardInfo = reactive({});
const cardNumber = ref('');

let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
  token = jwt_decode(localStorage.getItem("longToken"))
}
onMounted(() => {
    axios.get('http://192.168.110.221:8080/user/findInfoController', {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userNumber: token.userNumber,
            userId: token.userId,
            //银行卡号
            accountNumber: store.accountNumber
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                //客户编号
                cardInfo.userName = resp.data.datas.user.userName
                cardInfo.userNumber = resp.data.datas.user.userNumber
                cardInfo.englishName = resp.data.datas.user.englishName
                cardInfo.gender = resp.data.datas.user.gender
                cardInfo.homeAddress = resp.data.datas.user.homeAddress
                cardInfo.phone = resp.data.datas.user.phone
                cardInfo.email = resp.data.datas.user.email
                cardInfo.companyAddress = resp.data.datas.user.companyAddress
                //账户信息
                cardInfo.accountNumber = resp.data.datas.account.accountNumber
                cardInfo.accountStatus = resp.data.datas.account.accountStatus == 1 ? '可用' : '不可用'
                cardInfo.currencyCode = resp.data.datas.account.currencyCode
                cardInfo.ledgerBalance = resp.data.datas.account.ledgerBalance
                cardInfo.availableBalance = resp.data.datas.account.availableBalance

            } else if (resp.data.code == 400) {
                open("没有查询到用户的具体信息")
                router.push({ path: '/' })

            }
        })
        .catch((e) => {
            router.push({path:'/login'})
        })
})

function open(errormsg) {
    ElMessageBox.alert(errormsg, '消息', {
        confirmButtonText: '确认',
    })
}
function unBound() {
    let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
    axios.get("http://192.168.110.221:8080/user/unbindCardController", {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
            accountNumber: store.accountNumber
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                open(resp.data.msg)
                router.push("/card-bound")
            } else {
                open(resp.data.msg)
            }
        })
}
</script>

<template>
    <div v-if="cardInfo != null" class="box">
        <h2>客户信息</h2>
        <div class="info-box">
            <li>
                <span>客户编号</span>
                <!-- <p>83000000</p> -->
                <p>{{ cardInfo.userNumber }}</p>
            </li>
            <li>
                <span>姓名</span>
                <p>{{ cardInfo.userName }}</p>
            </li>
            <li>
                <span>英文名</span>
                <p>{{ cardInfo.englishName }}</p>
            </li>
            <!-- <li>
                <span>登录编号</span>
                <p>SB1234567{{  }}</p>
            </li> -->
            <li>
                <span>性别</span>
                <p>{{ cardInfo.gender }}</p>
            </li>
            <li>
                <span>地址</span>
                <!-- <p>宇宙--可观测宇宙--Laniakea超星系团--室女超星系团--本星系片--本星系群--银河系小群--银河系--猎户臂-古尔德带＞本地泡＞本星际云＞太阳系＞地月系＞地球</p> -->
                <p>{{ cardInfo.homeAddress }}</p>
            </li>
            <li>
                <span>手机号</span>
                <p>{{ cardInfo.phone }}</p>
            </li>
            <li>
                <span>邮箱</span>
                <p>{{ cardInfo.email }}</p>
            </li>
            <li>
                <span>公司地址</span>
                <p>{{ cardInfo.companyAddress }}</p>
            </li>

        </div>

        <h2>账户信息</h2>
        <div class="info-box">
            <li>
                <span>账户</span>
                <p>{{ cardInfo.accountNumber }}</p>
            </li>
            <li>
                <span>账户状态</span>
                <p>{{ cardInfo.accountStatus }}</p>
            </li>
            <li>
                <span>货币类型</span>
                <p>{{ cardInfo.currencyCode }}</p>
            </li>
            <li>
                <span>账户金额</span>
                <p>{{ cardInfo.ledgerBalance }}</p>
            </li>
            <li>
                <span>可用金额</span>
                <p>{{ cardInfo.availableBalance }}</p>
            </li>
        </div>

        <ButtonVue btn-name="取消绑定当前账户" btn-color="red" @click="unBound"></ButtonVue>
    </div>
</template>
<style scoped>
* {
    margin: 0;
    list-style: none;
}

.box {
    padding-top: 10px;
    padding-bottom: 10px;
    /* margin-top: 60px; */
    background-color: rgb(241, 240, 240);
}

h2 {
    margin: 0px 10px 10px;
    font: normal 400 16px 'Serif';
}

.info-box {
    margin: 0 10px 10px;
    background-color: #fff !important;
}

.info-box::after {
    display: block;
    content: "";
    clear: both;
}

li {
    width: 100%;
    border-top: 1px solid lightgray;
}

li::after {
    display: block;
    content: "";
    clear: both;
}

span,
p {
    padding: 5px
}

span {
    float: left;
    width: 26%;
    color: rgb(128, 127, 127);
    text-indent: 12px;
}

p {
    float: right;
    width: 64%;
    color: rgb(56, 174, 214);
}</style>